<template>
  <div id="home">
    <headers>
      <div slot="conter">购物街</div>
    </headers>

    <tab-control
      :titles="['流行', '新款', '精选']"
      :class="{ current: isTabControl }"
      @tabToggle="TabToggle"
      v-show="isTabControl"
      ref="copyTabControl"
    ></tab-control>

    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      :pull-up-load="true"
      @scroll="contentScroll"
      @pullingUp="loadMore"
    >
      <swiper>
        <swiper-item href="" v-for="(item, index) in bannerList" :key="index">
          <a :href="item.link">
            <img :src="item.image" alt="" @load="imageLoad" />
          </a>
        </swiper-item>
      </swiper>

      <div class="nav_bar">
        <ul>
          <li v-for="(item, index) in recommendList" :key="index">
            <a href="">
              <img :src="item.image" alt="" />
              <div>{{ item.title }}</div>
            </a>
          </li>
        </ul>
      </div>

      <div class="pic">
        <a href="http://act.mogujie.com/zzlx67">
          <img src="../../assets/img/home/recommend_bg.jpg" alt="" />
        </a>
      </div>

      <tab-control
        :titles="['流行', '新款', '精选']"
        @tabToggle="TabToggle"
        ref="tabControl"
      ></tab-control>

      <goods-list :goodsList="showGoods"></goods-list>
    </scroll>

    <soll-top @click.native="clickSollTop" v-show="isSollTop"></soll-top>
  </div>
</template>

<script>
import Headers from '../../components/content/Headers'
import Swiper from '../../components/common/swiper/Swiper'
import SwiperItem from '../../components/common/swiper/SwiperItem'
import TabControl from '../../components/content/TabControl'
import Scroll from '../../components/common/Scroll/Scroll'
import SollTop from '../../components/content/SollTop.vue'
import GoodsList from '../../components/content/GoodsList'

import { getHomeMltidata, getGoodsList } from '../../network/getData'
import { debounce } from '../../network/utils'

export default {
  data() {
    return {
      bannerList: [], // 轮播图数据
      recommendList: [], // 特点数据
      // 列表数据
      goods: {
        pop: { page: 1, list: [] },
        new: { page: 1, list: [] },
        sell: { page: 1, list: [] }
      },
      currentType: 'pop', // 显示那个列表的数据
      isSollTop: false, // 是否显示回到顶部组件
      tabOffsetTop: 0, // 选项卡的头部距离
      isTabControl: false, // 偷天换日
      monitorFun: null // 存储函数
    }
  },
  components: {
    Headers,
    Swiper,
    SwiperItem,
    TabControl,
    Scroll,
    SollTop,
    GoodsList
  },
  // 目前没有出现bug
  // 进入组件触发
  activated() {
    this.$refs.scroll.refresh()
  },
  // 切换组件触发
  deactivated() {
    // 取消图片的监听
    this.$bus.$off('itemImageLoad', this.monitorFun)
  },
  created() {
    // 获取轮播图和特点数据
    getHomeMltidata().then(res => {
      this.bannerList = res.data.banner.list
      this.recommendList = res.data.recommend.list
    })

    this.getGoodsList('pop')
    this.getGoodsList('new')
    this.getGoodsList('sell')
  },
  mounted() {
    // 使用事件总线计算高度
    const refresh = debounce(this.$refs.scroll.refresh, 200)
    this.monitorFun = () => {
      refresh()
    }
    this.$bus.$on('itemImageLoad', this.monitorFun)
    this.imageLoad()
  },
  methods: {
    // 获取列表数据
    getGoodsList(type) {
      getGoodsList(type, this.goods[type].page).then(res => {
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page += 1
      })

      // 上拉加载更多使用多次
      if (!this.$refs.scroll) return
      this.$refs.scroll.scroll.finishPullUp()
    },
    // 切换流行\新款\精选
    TabToggle(index) {
      switch (index) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }

      // 因为复制了选项卡的代码，因此切换的时候两个都要重新赋值
      this.$refs.copyTabControl.currentIndex = index
      this.$refs.tabControl.currentIndex = index
    },
    // 回到顶部
    clickSollTop() {
      this.$refs.scroll.scrollTo(0, 0, 500)
    },
    // 是否显示回到顶部组件和显示选项卡
    contentScroll(position) {
      if (-position.y > 1000) {
        this.isSollTop = true
      } else {
        this.isSollTop = false
      }

      if (-position.y > this.tabOffsetTop) {
        this.isTabControl = true
      } else {
        this.isTabControl = false
      }
    },
    // 上拉加载更多数据
    loadMore() {
      this.getGoodsList(this.currentType)
      // 重新计算Scroll的高度
      this.$refs.scroll.scroll.refresh()
    },
    // 监听轮播图图片加载事件
    imageLoad() {
      // 获取选项卡的顶部坐标
      this.tabOffsetTop = this.$refs.tabControl.$el.offsetTop - 45
    }
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list
    }
  }
}
</script>

<style lang="less" scoped>
#home {
  height: 100vh;
  overflow: hidden;
  // margin-top: 45px;
}

.nav_bar {
  width: 100%;
  font-size: var(--font-size);
  text-align: center;
  padding: 5px 0 20px;
  border-bottom: 8px solid #ccc;
  ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    img {
      width: 70px;
      margin-bottom: 5px;
    }
  }
}

.current {
  position: absolute;
  width: 100%;
  // top: 90px;
  left: 0;
  z-index: 99;
  background-color: #fff;
}

.content {
  height: calc(100% - 95px);

  margin-bottom: 50px;
}

.pic {
  img {
    width: 100%;
  }
}
</style>
